@extends('layouts.admin')

@section('title', config('app.name') . ' - 管理平台 - 栏目列表')

@section('css')
    <style>
        .layui-table {
            table-layout: fixed;
        }
        .layui-table-overflow {
            overflow-x: auto;
        }
        .layui-table td, .layui-table th {
            font-size: 13px !important;
        }
    </style>
@endsection

@section('content')


    <div class="layui-fluid">
        <div class="layui-row layui-col-space1">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <button class="layui-btn"
                                onclick="xadmin.open('添加栏目',' ', '50%', '80%')">
                            <i class="layui-icon layui-icon-add-circle"></i>添加
                        </button>
                        <button class="layui-btn" data-action="expand">
                            <i class="iconfont-icon iconfont-icon-nodeexpand"></i>展开
                        </button>
                        <button class="layui-btn" data-action="collapse">
                            <i class="iconfont-icon iconfont-icon-nodecollapse"></i>收起
                        </button>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-table-overflow">
                            <table class="layui-table">
                                <thead class="">
                                <tr>
                                    <th style="width:50px">id</th> <!-- width:50px -->
                                    <th style="width:50px">排序</th> <!-- width:50px -->
                                    <th style="width:260px">名称 / 外部链接</th> <!-- width:270px -->
                                    <th style="width:50px">别名</th> <!-- width:50px -->
                                    <th style="width:100px">顶级分类</th> <!-- width:65px -->
                                    <th style="width:50px;text-align: center">是否显示</th> <!-- width:65px -->
                                    <th style="width:50px;text-align: center">是否是首页导航</th> <!-- width:65px -->
                                    <th style="width:50px;text-align: center">是否是栏目导航</th> <!-- width:65px -->
                                    <th style="width:50px;text-align: center">是否显示主体</th> <!-- width:65px -->
                                    <th style="width:50px;text-align: center">是否单页面</th> <!-- width:65px -->
                                    <th style="width:50px;text-align: center">是否内容管理栏目</th> <!-- width:65px -->
                                    <th style="width:100px">创建时间 / 修改时间</th> <!-- width:250px -->
                                    <th style="width:60px">操作</th>
                                </thead>
                                <tbody class="tree-list">
                                @foreach($cates as $cate)
                                    <tr item-id='{{ $cate->id }}' pid='{{ $cate->pid ?: 0 }}'>
                                        <td>{{ $cate->id }}</td>
                                        <td>{{ $cate->corders }}</td>
                                        <td>
                                            {!! str_repeat('&nbsp;', ($cate->level -1 ) * 8) !!}
                                            <i data-action></i>
                                            {{ $cate->cname }}  / {{ $cate->url ?: '( no route )' }}
                                        </td>
                                        <td>{{ $cate->aliasname ?: '无'}}</td>
                                        @if ($cate->pid == 0)
                                            <td style="color: red;font-weight: bold;font-size: 14px">{{ $cate->parentName }} ( {{ $cate->pid }} )</td>
                                            @else
                                            <td>{{ $cate->parentName }} ( {{ $cate->pid }} )</td>
                                        @endif
                                        <td style="text-align: center">

                                            @if ($cate->flags === 0)
                                                <a title="开启栏目"
                                                   data-url=" "
                                                   onclick="updateStatus(this,'是否开启此栏目的显示')" href="javascript:;">
                                                    <i class="layui-icon">&#x1005;</i>
                                                </a>
                                            @endif
                                        </td>
                                        <td style="text-align: center">
                                            否
                                        </td>
                                        <td style="text-align: center">
                                            否
                                        </td>
                                        <td style="text-align: center">
                                            否
                                        </td>
                                        <td style="text-align: center">
                                            否
                                        </td>

                                        <td style="text-align: center">
                                            {!! $cate->is_tree !!}
                                        </td>
                                        <td>11</td>
                                        <td class="td-manage">

                                                <a title="添加"
                                                   data-url=" "
                                                   onclick="addPermission(this)"
                                                   href="javascript:;">
                                                    <i class="layui-icon layui-icon-add-circle"></i>
                                                </a>
                                            <a title="编辑"
                                               data-url=" "
                                               onclick="editPermission(this)"
                                               href="javascript:;">
                                                <i class="layui-icon">&#xe642;</i>
                                            </a>
                                            <a title="删除"
                                               data-url=" "
                                               onclick="delPermission(this)" href="javascript:;">
                                                <i class="layui-icon">&#xe640;</i>
                                            </a>
                                            @if ($cate->flags)
                                                <a title="关闭栏目"
                                                   data-url=" "
                                                   onclick="updateStatus(this,'确认要关闭这个栏目分类吗？，注意如果栏目是主分类，下面的子分类也会被关闭')" href="javascript:;">
                                                    <i class="layui-icon">&#x1007;</i>
                                                </a>
                                            @endif

                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('bottom-js')
    <script>

        function addPermission(obj) {
            var obj = $(obj);
            xadmin.open('添加', obj.data('url'), '50%', '80%');
        }

        function editPermission(obj) {
            var obj = $(obj);
            xadmin.open('编辑', obj.data('url'), '50%', '80%');
        }
        function updateStatus(obj,msg) {
            var obj = $(obj);
            layer.confirm(msg, function (i) {
                sendAjax({
                    'url': obj.data('url'),
                    'data': {_method: 'PUT'},
                    'successCallBack': function (res) {
                        if (res.code === 2000000) {
                            layer.msg(res.message, {icon: 6, time: 1500}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg(res.message, {icon: 5, time: 1500});
                        }
                    },
                });
            });
        }
        function delPermission(obj) {
            var obj = $(obj);
            layer.confirm('确认要删除这个栏目分类吗？', function (i) {
                sendAjax({
                    'url': obj.data('url'),
                    'data': {_method: 'delete'},
                    'successCallBack': function (res) {
                        if (res.code === 2000000) {
                            layer.msg(res.message, {icon: 6, time: 1500}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg(res.message, {icon: 5, time: 1500});
                        }
                    },
                });
            });
        }
        function getMyDate(time){
            if(typeof(time)=="undefined"){
                return "";
            }
            var oDate = new Date(time),
                oYear = oDate.getFullYear(),
                oMonth = oDate.getMonth()+1,
                oDay = oDate.getDate(),
                oHour = oDate.getHours(),
                oMin = oDate.getMinutes(),
                oSen = oDate.getSeconds(),
                oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间

            return oTime;
        };

        //补0操作,当时间数据小于10的时候，给该数据前面加一个0
        function getzf(num){
            if(parseInt(num) < 10){
                num = '0'+num;
            }
            return num;
        }

        layui.use(['jquery', 'iconExtend', 'treeList'], function () {
            var $ = layui.jquery;
            var iconExtend = layui.iconExtend;
            var treeList = layui.treeList;

            iconExtend.loader('iconfont');
            treeList.render({
                parentid: 'pid',
            });
        });
    </script>
@endsection
